import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class SettingPage extends StatefulWidget {
  @override
  _SettingPageState createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  bool _showEmail = false;
  bool _showButton = true;
  double _opacityValue = 0.5;

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final fontColor = Colors.white;
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 10.0),
          width: size.width,
          child: SingleChildScrollView(
            child: Column(children: <Widget>[
              const SizedBox(height: 20.0),
              Stack(
                alignment: Alignment.center,
                children: <Widget>[
                  InkWell(
                    child: Opacity(
                      opacity: _opacityValue,
                      child: Text(
                        "1921841409@qq.com",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize:
                            Theme.of(context).textTheme.display1.fontSize),
                      ),
                    ),
                    onTap: _onTap,
                    onLongPress: _launchEmail,
                  ),
                  Offstage(
                    offstage: _showEmail,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        InkWell(
                          onTap: _onTap,
                          child: Hero(
                            tag: "avatar",
                            child: Container(
                              height: 100.0,
                              width: 100.0,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(50.0),
                                border:
                                Border.all(color: Colors.white, width: 4.0),
                                image: DecorationImage(
                                    image: AssetImage(
                                      "assets/image/avatar.jpeg",
                                    )),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 20.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Icon(Icons.whatshot, color: Colors.greenAccent),
                      const SizedBox(width: 6.0),
                      Text("技能树",
                          style: TextStyle(
                              letterSpacing: 3.0,
                              fontSize: 18.0,
                              fontWeight: FontWeight.bold,
                              color: fontColor)),
                    ],
                  ),
                  Offstage(
                    offstage: _showButton,
                    child: Row(
                      children: <Widget>[
                        IconButton(
                          icon: Icon(
                            Icons.add_circle,
                            color: fontColor,
                          ),
                          onPressed: () {
                            if (_opacityValue < 0.9) {
                              setState(() {
                                _opacityValue = _opacityValue + 0.1;
                              });
                            }
                          },
                        ),
                        IconButton(
                          icon: Icon(
                            Icons.do_not_disturb_on,
                            color: fontColor,
                          ),
                          onPressed: () {
                            if (_opacityValue > 0.1) {
                              setState(() {
                                _opacityValue -= 0.1;
                              });
                            }
                          },
                        ),
                      ],
                    ),
                  )
                ],
              ),
              const SizedBox(height: 18.0),
              _linearWidget(fontColor, "Java", 0.9, Color(0xff2ac1eb)),
              _linearWidget(fontColor, "Spring", 0.75, Color(0xff2ae6b1)),
              _linearWidget(fontColor, "Vert.x", 0.68, Color(0xffeb78b2)),
              _linearWidget(fontColor, "Flutter", 0.65, Color(0xffffc95b)),
              _linearWidget(fontColor, "MyBatis", 0.60, Color(0xff2ac1eb)),
              _linearWidget(fontColor, "JavaScript", 0.50, Color(0xffeb78b2)),
              _linearWidget(fontColor, "React", 0.45, Color(0xff2ae6b1)),
              const SizedBox(height: 30.0),
              InkWell(
                child: Container(
                  child: Icon(Icons.fingerprint,
                      color: Colors.blueGrey, size: 34.0),
                ),
                onLongPress: () {
                  setState(() {
                    _showButton = !_showButton;
                  });
                },
              )
            ]),
          ),
        ),
      ),
    );
  }

  Widget _linearWidget(
      Color fontColor, String name, double value, Color color) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          name,
          style: TextStyle(color: fontColor, fontStyle: FontStyle.italic),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 8.0),
          child: Container(
            margin: EdgeInsets.only(bottom: 5.0),
            height: 10.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
            ),
            child: LinearProgressIndicator(
              valueColor: AlwaysStoppedAnimation(color),
              value: value, //精确模式，进度20%
            ),
          ),
        )
      ],
    );
  }

  void _onTap() {
    setState(() {
      _showEmail = !_showEmail;
    });
  }

  void _launchEmail() async {
    const url = 'mailto:1921841409@qq.com?subject=时间糖果-建议';
    if (await canLaunch(url)) {
      await launch(url);
    }
  }
}

// #ffc95b
// #eb78b2
// #2ae6b1
// #2ac1eb
